<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('${table.comment}-小邑')" />
    <style>
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<body marginwidth="0" marginheight="0">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="${lowerEntityName}Form">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <#list allFieldInfo as fieldInfo>
                            <#if fieldInfo.queryField>
                                <div class="layui-inline">
                                    <label class="layui-form-label">${fieldInfo.fieldComment}</label>
                                    <div class="layui-input-inline">
                                        <input id="${fieldInfo.fieldName}" name="${fieldInfo.fieldName}"
                                               class="layui-input" type="text" autocomplete="off"
                                               placeholder="请输入${fieldInfo.fieldComment}"/>
                                    </div>
                                </div>
                            </#if>
                        </#list>
                        <div class="layui-inline">
                            <button type="button" id="searchBtn"
                                    class="xy-btn xy-btn-primary icon-btn xy-btn-sm">
                                <i class="layui-icon">&#xe615;</i> 搜索
                            </button>
<#--                            <button type="button" id="resetBtn"-->
<#--                                    class="layui-btn layui-btn-primary icon-btn layui-btn-sm">-->
<#--                                <i class="layui-icon">&#xe669;</i> 重置-->
<#--                            </button>-->
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="${lowerEntityName}Table" lay-filter="${lowerEntityName}Table"></table>
            <!-- 表格操作工具栏 -->
            <script type="text/html" id="toolBar">
                <button sec:authorize="hasPermission('/${lowerEntityName}/add${entity}','${lowerEntityName}:add${entity}')"  type="button" class="xy-btn xy-btn-primary xy-btn-sm" lay-event="add">
                    <i class="layui-icon">&#xe654;</i> 新增
                </button>
                <button sec:authorize="hasPermission('/${lowerEntityName}/deleteBatch','${lowerEntityName}:deleteBatch')" type="button" class="xy-btn xy-btn-sm xy-btn-danger" lay-event="delete">
                    <i class="layui-icon">&#xe640;</i> 删除
                </button>
            </script>

            <!-- 数据行工具栏 -->
            <script type="text/html" id="lineBar">
                <a sec:authorize="hasPermission('/${lowerEntityName}/edit${entity}','${lowerEntityName}:edit${entity}')" class="xy-btn xy-btn-xs" lay-event="edit">编辑</a>
                <a sec:authorize="hasPermission('/${lowerEntityName}/delete','${lowerEntityName}:delete')" class="xy-btn xy-btn-danger xy-btn-xs" lay-event="del">删除</a>
            </script>

        </div>
    </div>
</div>

<script>
    layui.use(['table', 'layer', 'jquery', 'form', 'util', 'notice'], function () {
        var layer = layui.layer
            , table = layui.table
            , form = layui.form
            , notice = layui.notice
            , $ = layui.jquery
            , util = layui.util;
            util.fixbar({
                top: true //返回顶部
                , css: { right: 50, bottom: 50 }
                , bgcolor: '#3b7cd8'
                , click: function (type) {

                }
            });
        var tableIns = table.render({
            elem: '#${lowerEntityName}Table'
            ,method:'post'
            ,url: basePath + '/${lowerEntityName}/list' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cellMinWidth: 100
            ,cols: [ [ //表头
                {type: 'checkbox'}
                <#list table.fields as field>
                <#if field.keyFlag>
                ,{field: '${field.propertyName}',hide:true,title:'${field.comment}',align:"center"}
                <#else>
                ,{field: '${field.propertyName}', title: '${field.comment}',align:"center"}
                </#if>
                </#list>
                ,{fixed: 'right',width: 150, align:'center', toolbar: '#lineBar',title:'操作'}
            ] ]
            ,limit: 10
            ,limits: [10, 20, 50, 100]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , theme:"#1E9FFF"
            }
        });

        // 监听头工具栏事件
        table.on('toolbar(${lowerEntityName}Table)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据

            if (obj.event === 'add') {
                // 新增数据
                layer.open({
                    type: 2,
                    title:"新增数据",
                    id:'add_${lowerEntityName}Id',
                    skin: 'layer-ext-myskin',
                    shadeClose: false,
                    shade: 0.3,
                    area: ["80%","80%"],
                    content: basePath+ '/view/${lowerEntityName}/${lowerEntityName}_add'
                });
            } else if(obj.event === 'delete') {
                // 批量删除
                if (checkStatus.data.length === 0) {
                    top.layui.notice.msg("未选择数据~" ,{icon: 3,position:"topCenter"});
                } else {
                    layer.confirm('确定要删除选中数据吗？',{icon:5, title:'提示',skin: 'layer-ext-myskin'}, function(index) {
                        var ids = [];
                        $.each(data, function(index,element) {
                            ids.push(element.${keyPropertyName});
                        });
                        layer.close(index);
                        // 异步请求
                        sendAjaxPostToError(
                            basePath+ '/${lowerEntityName}/deleteBatch',
                            {ids: ids},
                            function (result){
                                if (result.success){
                                    top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                                    table.reload('${lowerEntityName}Table',{
                                        page:{curr:1}
                                    });
                                }else {
                                    top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                                }
                            },
                            function (data) {
                                if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                    top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                                }else{
                                    top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                                }
                            }
                        )
                    });
                }
            }
        });

        //监听行工具事件
        table.on('tool(${lowerEntityName}Table)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'del') {
                // 单记录删除
                layer.confirm('确定要删除吗？',{icon:5, title:'提示',skin: 'layer-ext-myskin'},function(index) {
                    layer.close(index);
                    sendAjaxPostToError(
                        basePath+ '/${lowerEntityName}/delete',
                        {${keyPropertyName} : data.${keyPropertyName}},
                        function (result){
                            if (result.success){
                                top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                                table.reload('${lowerEntityName}Table',{
                                    page:{curr:1}
                                });
                            }else {
                                top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                            }
                        },
                        function (data) {
                            if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                            }else{
                                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                            }
                        }
                    )
                });
            } else if(layEvent === 'edit') {
                // 修改
                layer.open({
                    type: 2,
                    title: "修改数据",
                    shadeClose: false,
                    id:'update_${lowerEntityName}Id',
                    skin: 'layer-ext-myskin',
                    shade: 0.3,
                    area: ["80%","80%"],
                    content: basePath+ '/view/${lowerEntityName}/${lowerEntityName}_edit?${keyPropertyName}='+obj.data.${keyPropertyName}
                });
            }
        });

        // 搜索
        $('#searchBtn').on('click',function () {
            tableIns.reload({
                where: getFormData('${lowerEntityName}Form')
            });
        });

        <#--// 重置搜索条件-->
        <#--$('#resetBtn').on('click',function () {-->
        <#--    document.getElementById('${lowerEntityName}Form').reset();-->
        <#--    tableIns.reload({-->
        <#--        where: fast.getFormData('${lowerEntityName}Form'),-->
        <#--        page: {curr: 1}-->
        <#--    });-->
        <#--});-->

    });
</script>
</body>
</html>
